<template>
	<view>
		<!-- 自定义导航栏 -->
		<news-nav-bar :tabbars='tabbars' :tabIndex='tabIndex' @tab-click='handleTapTabItem' @publish-click='handleNavigateToPublish'/>
		
		
		<view class="uni-tab-bar">
			<swiper 
				class="swiper-box" 
				:current='tabIndex'
				@change="handleSwiperChange"
				:style="{'height': swiperHeight + 'px'}">
				<!-- 关注 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="handleScrolltolower">
						<!-- 自定义列表 -->
						<block  v-for="(item, index) in guanzhu.list" :key='index'>
							<common-list :item="item" :index="index"/>
						</block>
						<!-- 上拉加载更多哦 -->
						<load-more :loadtext="guanzhu.loadtext"/>
					</scroll-view>
				</swiper-item>
				<!-- 话题 -->
				<swiper-item>
					<scroll-view scroll-y class="list">
						<!-- 搜索框 -->
						<view class="search-input">
							<input  class="uni-input" placeholder=" 搜索内容" placeholder-class="topic-search icon iconfont icon-sousuo"/>
						</view>
						<!-- 轮播图 -->
						<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="topic-swiper">
							<block v-for="(item, index) in topic.swiper" :key='index'>
							<swiper-item >
								<image :src="item.src" mode="widthFix" lazy-load></image>
							</swiper-item>
							</block>
						</swiper>
						<!-- 热门分类 -->
						<topic-nav :nav='topic.nav'/>
						<!-- 最近更新 -->
						
						<view class="topic-new">
							<view>最近更新</view>
							<block v-for="(item, index) in topic.list" :key='index'>
								<topic-list :item='item' :index="index"/>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>b
<script>
	import CommonList from '../../components/common/common-list.vue'
	import NewsNavBar from '../../components/news/news-nav-bar.vue'
	import LoadMore from '../../components/common/load-more.vue'
	import TopicNav from '../../components/news/topic-nav.vue'
	import TopicList from '../../components/news/topic-list.vue'
	export default {
		components:{
			CommonList,NewsNavBar,LoadMore,TopicNav,TopicList
		},
		data() {
			return {
				swiperHeight: 500,
				tabIndex: 1,
				tabbars: [
					{name: "关注", id: "guanzhu"},
					{name: "话题", id: "huati"}
				],
				topic: {
					swiper: [
						{src: "/static/demo/banner2.jpg"},
						{src: "/static/demo/banner2.jpg"},
						{src: "/static/demo/banner2.jpg"}
					],
					nav: [
						{name: '最近'},
						{name: '游戏'},
						{name: '打卡'},
						{name: '情感'},
						{name: '故事'},
						{name: '喜爱'}
					],
					list: [
						{
							toppic: '/static/demo/topicpic/13.jpeg',
							title: '我是话题',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: '10'
						},
						{
							toppic: '/static/demo/topicpic/13.jpeg',
							title: '我是话题',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: '10'
						},
						{
							toppic: '/static/demo/topicpic/13.jpeg',
							title: '我是话题',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: '10'
						},
						{
							toppic: '/static/demo/topicpic/13.jpeg',
							title: '我是话题',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: '10'
						},
						{
							toppic: '/static/demo/topicpic/13.jpeg',
							title: '我是话题',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: '10'
						},
						{
							toppic: '/static/demo/topicpic/13.jpeg',
							title: '我是话题',
							desc: '我是话题描述',
							totalnum: 50,
							todaynum: '10'
						}
					]
				},
				guanzhu: {
					loadtext: '上拉加载更多',
					list: [
						// 图文
						{
							userpic: "/static/demo/userpic/12.jpg",
							username: "风吹屁屁凉",
							sex: 1, // 0 男 1 女
							age:25,
							isguanzhu: false,
							title: "我是标题哦",
							titlepic: "/static/demo/datapic/13.jpg",
							video: false,
							share:false,
							path: "深圳·龙岗",
							sharenum: 20,
							commentnum:30,
							goodnum: 40		
						},
						// 文字列表
						{
							userpic: "/static/demo/userpic/12.jpg",
							username: "风吹屁屁凉",
							sex: 0, // 0 男 1 女
							age:25,
							isguanzhu: false,
							title: "我是标题哦",
							titlepic: "",
							video: false,
							share:false,
							path: "深圳·龙岗",
							sharenum: 20,
							commentnum:30,
							goodnum: 40		
						},
						// 视频
						{
							userpic: "/static/demo/userpic/12.jpg",
							username: "风吹屁屁凉",
							sex: 0, // 0 男 1 女
							age:25,
							isguanzhu: false,
							title: "我是标题哦",
							titlepic: "/static/demo/datapic/13.jpg",
							video: {
								looknum: "20w",
								long: "2:47"
							},
							share:false,
							path: "深圳·龙岗",
							sharenum: 20,
							commentnum:30,
							goodnum: 40		
						},
						// 分享
						{
							userpic: "/static/demo/userpic/12.jpg",
							username: "风吹屁屁凉",
							sex: 1, // 0 男 1 女
							age:25,
							isguanzhu: false,
							title: "我是标题哦",
							titlepic: "",
							video: false,
							share:{
								title: "我是标题",
								titlepic: "/static/demo/datapic/14.jpg"
							},
							path: "深圳·龙岗",
							sharenum: 20,
							commentnum:30,
							goodnum: 40		
						}
					]
				}
				
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					this.windowWidth = res.windowHeight
					this.swiperHeight = height
				}
			})
		},
		methods: {
			
			// 点击头部笔跳转发布页面
			handleNavigateToPublish() {
				uni.navigateTo({
					url:"/pages/publish/publish"
				})
			},
			handleTapTabItem(index) {
				this.tabIndex = index
			},
			// 轮播图变化(获取index)
			handleSwiperChange(e) {
				this.tabIndex = e.detail.current
			},
			// 关注上拉加载更多
			handleScrolltolower() {
				if (this.guanzhu.loadtext != '上拉加载更多') return
				this.guanzhu.loadtext = '正在加载中.....'
			
				setTimeout(() => {
					this.guanzhu.list = this.guanzhu.list.concat(...this.guanzhu.list)
					this.guanzhu.loadtext = '上拉加载更多'
				}, 1000)
			}
		}
	}
</script>

<style scoped>
.search-input {
	padding: 20upx;
}
.search-input>input{
	background-color: #F4F4F4;
}
.topic-search {
	display: flex;
	justify-content: center;
	font-size: 27upx;
}

.topic-swiper {
	padding: 0 20upx 20upx;
}
.topic-swiper image{
	width: 100%;
	border-radius: 10upx;
}

.topic-new {
	padding: 20upx;
}
.topic-new>view:first-child {
	padding-bottom: 5upx;
	font-size: 32upx;
}

</style>

